	<%@page import="entity.Essay"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>VINSONWS</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
<link rel="stylesheet"  href="css/bootstrapMagic.css" />
<link rel="stylesheet"  href="css/footer.css" />
<link rel="stylesheet"  href="css/index.css" />
<link rel="stylesheet"  href="css/listmenu.css" />
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<jsp:include page="top_nav.jsp" />

<jsp:include page="nav.jsp" />
 <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!--  <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>-->
    <div class="carousel-inner">
      <div class="carousel-item active" style="background:url(img/welcome.jpg);background-attachment:fixed;background-repeat:no-repeat;background-size：1920px;background-position:center;">
        <!-- <img class="first-slide" src="img/welcome.jpg" alt="First slide"> -->
        <div class="first-slide" alt="First slide" ></div>
        <div class="container">
          <div class="carousel-caption">
            <h1 class="display-1" style="color:#343a40;background-color: rgba(255,255,255,0.5);">Welcome!</h1>
            <!--  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.
              Nullam id dolor id nibh ultricies vehicula ut id elit.</p>-->
            <p>
            </p>
          </div>
        </div>
      </div>
       <%for(String Ename:(List<String>)session.getAttribute("navsKeys")){ %>
	      <div class="carousel-item" style="background:url(img/<%=Ename %>.jpg);background-attachment:fixed;background-repeat:no-repeat;background-position:center;">
	        <!-- <img class="first-slide" src="img/<%=Ename %>.jpg" alt="First slide"> -->
	        <div class="container">
	          <div class="carousel-caption">
	            <h1 class="display-1"  style="color:#343a40;background-color: rgba(255,255,255,0.5);"><%=session.getAttribute(Ename) %></h1><h1></h1>
	            <!--  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.
	              Nullam id dolor id nibh ultricies vehicula ut id elit.</p>-->
	            <p>
	             <a class="btn btn-lg btn-primary" href="essayList?className=<%=Ename %>" role="button" style="float:right;">Learn more</a> 
	            </p>
	          </div>
	        </div>
	      </div>
      <%} %>
    </div>
    <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>


  <!-- Marketing messaging and featurettes
  ================================================== -->
  <!-- Wrap the rest of the page in another container to center all the content. -->

  <div class="container marketing">

    <!-- Three columns of text below the carousel -->
    <div class="row">
      <%for(String Ename:(List<String>)session.getAttribute("navsKeys")){ %>
      	<div class="col-md-4" style="padding-bottom:2.25rem;">
			 <div class="panel panel-default" >
				<div class="panel-heading">
					<h3 class="panel-title">
						<%=session.getAttribute(Ename) %>
					</h3>
				</div>
				<div class="panel-body">
					<ul class="essaylist" style="display: flex;flex-wrap: wrap;padding-left: 0;margin-bottom: 0;list-style: none; ">
		        		<%for(Essay essay:(List<Essay>)session.getAttribute(Ename+"List")){ %>
		        			<li class="nav-item">
					          <a class="nav-link" href="essay?className=<%=essay.getClassName() %>&essay_id=<%=essay.getId() %>"><%=essay.getEssayName() %>
					         <!--  <p class="listtime">${essay.time }</p>--></a>
					        </li>
		        		<%} %>
	       			</ul>
				</div>
			</div>
	      
	        <a class="btn btn-secondary btn-sm" href="essayList?className=<%=Ename %>" role="button" style="float:right;">more &raquo;</a>
	    
     	</div>
   		<%} %>
    </div>
    <!-- /.row -->


   
  </div>
  <!-- /.container -->
 
<jsp:include page="footer.jsp" />
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js"></script>
 
</body>
</html>